<template>
  <view class="">
    <view
      :class="['activityBox',TabShow? 'activityBoxTab':'', shadowShow?'activityBoxshadow':'',circleShow?'activityBox1':'']"
      @click="activityBoxClick">
      <view class="activityBox_left">
        <view v-if="activityItem.status==1" class="label finish">
          待发布
        </view>
        <view v-if="activityItem.status==2" class="label proceed">
          进行中
        </view>
        <view v-if="activityItem.status==3" class="label proceed">
          派奖中
        </view>
        <view v-else-if="activityItem.status==5" class="label finish">
          已结束
        </view>
        <image :src="activityItem.previewImg" mode="aspectFill"></image>
      </view>
      <view class="activityBox_right">
        <h1>#{{activityItem.title}}</h1>
        <p>{{activityItem.remark}}</p>
        <text>{{activityItem.validDate[1] <= 0? '已结束':formatDuring(activityItem.validDate[1]) + '后结束'}} ｜{{activityItem.joiners}}人参与</text>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'user_activity',
    data() {
      return {

      }
    },
    computed: {

    },
    props: {
      activityItem: {
        type: [Array, Object],
        default: true
      },
      TabShow: {
        type: Boolean,
        default: false
      },
      shadowShow: {
        type: Boolean,
        default: false
      },
      circleShow: {
        type: Boolean,
        default: false
      },
    },
    methods: {
      // 时间天数
      formatDuring(mss) {
        var days = parseInt(mss / (1000 * 60 * 60 * 24));
        var hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = (mss % (1000 * 60)) / 1000;
        if (days) {
          return days + "天"
        } else if (hours) {
          return hours + "小时"
        } else {
          return minutes + "分钟"
        }
      },
      navTo(url) {
        uni.navigateTo({
          url: url
        })
      },
      activityBoxClick() {
        uni.report('ClicktheActivityTab', '点击活动标签');
        this.navTo('/subpkg/activity_particulars/activity_particulars?id=' + this.activityItem.id)
      }
    }
  }
</script>

<style lang="scss">
  .activityBoxTab {
    padding: 50rpx 24rpx;
    border-bottom: 1rpx solid #f1f1f1;
  }

  .activityBoxshadow {
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 20rpx 3rpx rgba(0, 0, 0, 0.04);
    padding: 30rpx 24rpx 26rpx;
    margin-top: 35rpx;
  }

  .activityBox1 {
    border: 1rpx solid rgba(61, 61, 61, .1);
    padding: 34rpx 33rpx;
    margin-bottom: 30rpx;
  }

  .activityBox {
    display: flex;
    // justify-content: space-between;
    // width: 702rpx;
    box-sizing: border-box;
    border-radius: 20rpx;

    .activityBox_left {
      position: relative;
      margin-right: 30rpx;

      image {
        width: 210rpx;
        height: 210rpx;
        border-radius: 10rpx;
      }

      .label {
        position: absolute;
        left: 14rpx;
        top: 14rpx;
        width: 74rpx;
        height: 30rpx;
        border-radius: 2px;
        line-height: 30rpx;
        text-align: center;
        font-size: 20rpx;
        color: rgba(255, 255, 255, 1);
      }

      .proceed {
        background-color: rgba(255, 87, 51, 1);
        box-shadow: 0px 2px 4px rgba(255, 87, 51, 0.22);
      }

      .finish {
        background-color: rgba(61, 61, 61, 0.25);
      }
    }

    .activityBox_right {
      h1 {
        font-size: 32rpx;
        color: rgba(61, 61, 61, 1);
        font-weight: 600;
        margin-top: 10rpx;
        margin-bottom: 20rpx;
      }

      p {
        font-size: 22rpx;
        line-height: 1.5;
        color: rgba(61, 61, 61, .5);
        margin-bottom: 26rpx;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      text {
        font-size: 22rpx;
        color: rgba(61, 61, 61, .5);
      }
    }
  }
</style>
